<template>
  <div>
    <ToolbarWrap></ToolbarWrap>
    <TypeNav></TypeNav>
    <ListContent
      :searchParams="searchParams"
      @trademarkInfo="trademarkInfo"
      @attrInfo="attrInfo"
    ></ListContent>
  </div>
</template>

<script>
import ListContent from "@/pages/Search/ListContent/ListContent";
import ToolbarWrap from "@/pages/Search/ToolbarWrap/ToolbarWrap";
export default {
  name: "Search",
  components: { ListContent, ToolbarWrap },
  data() {
    return {
      // 带给服务器参数
      searchParams: {
        category1Id: "", // 一级分类的ID
        category2Id: "", // 二级分类的ID
        category3Id: "", // 三级分类的ID
        categoryName: "", // 选择分类的名字
        keyword: "", // 关键字
        order: "1:desc", // 排序 初始值是综合，且为降序 1代表综合，2代表价格，asc代表升序，desc代表降序
        pageNo: 1, // 默认处于第几页
        pageSize: 10, // 打开后每一页显示几条信息
        props: [], // 平台售卖属性携带的参数
        trademark: "", // 品牌
      },
    };
  },
  beforeMount() {
    // 在发请求之前把接口需要传递的参数进行整理
    Object.assign(this.searchParams, this.$route.query, this.$route.params);
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 向服务器发请求获取search模块数据（根据参数不同返回不同的数据进行展示）
    //将该请求封装为函数，当需要调用的时候调用即可
    getData() {
      this.$store.dispatch("getSearchList", this.searchParams);
    },
    trademarkInfo(trademark) {
      // console.log("我是父组件",trademark);
      this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`;
      this.getData();
    },
    // 售卖属性的自定义事件
    attrInfo(attr, attrValue) {
      //整理参数
      let props = `${attr.attrId}:${attrValue}:${attr.attrName}`;
      // 数组去重
      if (this.searchParams.props.indexOf(props) == -1) {
        this.searchParams.props.push(props);
      }
      this.getData();
      // console.log(attr,attrValue);
    },
  },
  watch: {
    // 监听路由信息的变化触发是否重新发请求
    $route(newValue, oldValue) {
      // 再次发请求之前需要整理参数
      Object.assign(this.searchParams, this.$route.query, this.$route.params);
      this.getData();
      this.searchParams.category1Id = "";
      this.searchParams.category2Id = "";
      this.searchParams.category3Id = "";
      // console.log(this.searchParams);
    },
  },
  /* updated() {
          console.log(this.goodsList);
        }, */
  /* computed: {
    // mapGetters里面的写法传递为数组
    ...mapGetters(["goodsList","trademarkList"]),
  }, */
};
</script>

<style>
</style>